<template>
  <div class="layout">
    <!-- 顶部 -->
    <AppTopnav></AppTopnav>
    <!-- 头部 -->
    <AppHeader>头部</AppHeader>

    <!-- 吸顶的组件 -->
    <AppHeaderStickey></AppHeaderStickey>
    <!-- 内容容器 -->
    <main class="app-body">
      <!-- 二级路由 -->
      <router-view></router-view>
    </main>
    <!-- 底部 -->
    <AppFooter></AppFooter>
    <!-- <p ref="box">2222222</p> -->
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed, ref } from "vue";
import { useIntersectionObserver } from "@vueuse/core";

import AppTopnav from "@/components/app-topnav";
import AppHeader from "@/components/app-header";
import AppFooter from "@/components/app-footer";
import AppHeaderStickey from "../components/app-header-sticky.vue";
export default {
  name: "layout",
  components: { AppTopnav, AppHeader, AppFooter, AppHeaderStickey },

  setup() {
    const store = useStore();
    store.dispatch("category/getList");

    // // 以下代码 测试
    // const box = ref(null);
    // const { stop } = useIntersectionObserver(box, ([{ isIntersecting }]) => {
    //   // if (isIntersecting) {
    //   //   stop();
    //   //   findNew().then((data) => {
    //   //     goods.value = data.result;
    //   //   });
    //   // }
    //   console.log(
    //     isIntersecting === true ? "进入可视区" : "离开可视区",
    //     isIntersecting
    //   );
    //   if (isIntersecting) {
    //     stop();
    //   }
    // });
    return {};
  },
};
</script>

<style scoped lang="less">
.app-body {
  min-height: 600px;
}
</style>